<template>
  <!-- 返回组件 -->
  <navTabrBack
    :navbackStyle="['padding-right: 20rpx']"
    :title="'精品专利集'"
    :titleStyle="['padding: 0 28rpx;']"
  ></navTabrBack>
  <view class="content">
    <!-- 搜索 -->
    <view class="indexSerch">
      <view class="iconSerch iconfont icon-sousuo"></view>

      <input
        class="indexInput"
        maxlength="200"
        placeholder-style="color: #999999;"
        placeholder="输入专利集/专利名称"
        confirm-type="search"
        @confirm="doSearch"
      />
    </view>

    <!-- 条件搜索 -->

    <view class="conditionSerch">
      <view>全部（1234条）</view>
      <view :class="true ? 'conditionColor' : ''">默认排序</view>
      <view :class="false ? 'conditionColor condiDow' : 'condiDow'">
        <view>发布时间</view>
        <view class="iconfont icon-xiangxia1"></view>
      </view>
      <view :class="false ? 'conditionColor condiDow' : 'condiDow'">
        <view>订阅数</view>
        <view class="iconfont icon-xiangxia1"></view>
      </view>
    </view>
  </view>

  <!-- 列表展示 -->
  <view class="creamDataList">
    <view class="creamItem" @click="toCreamDetaild">
      <image src="../../static/img/page/02.png" mode="scaleToFill" />
      <view class="creamTitle">
        最全专利精品最全专利精品最全专利精品最全专利精品最全专利精品最全专利精品最全专利精品
      </view>
    </view>
  </view>
</template>

<script setup>
const toCreamDetaild = () => {
  uni.navigateTo({
    url: "/pages/creamDetails/index",
  });
}
// 搜索事件
const doSearch = () => {};
</script>

<style scoped>
.content {
  padding: 0 28rpx;
  padding-bottom: 55rpx;
}
.serchBtn {
  margin-top: 29rpx;
  display: flex;
  justify-content: space-between;
}
.serchBtn button:after {
  border: 0;
}
.serchBtn button {
  width: 337rpx;
  height: 74rpx;
  border-radius: 36rpx;
  line-height: 74rpx;
  font-size: 27rpx;
  font-weight: 400;
  background: #f5f5f5;
}
.checkout {
  background: #1677ff !important;
  color: #ffffff !important;
}
.noCheck {
  background: #f5f5f5 !important;
  color: #999999 !important;
}
/* 搜索栏 */
.indexSerch {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 23rpx;
  height: 72rpx;
  background: #ffffff;
  border-radius: 36rpx;
  padding-left: 76rpx;
  background: #f5f5f5;
}
.indexInput {
  width: 85%;
  height: 36rpx;
  font-size: 25rpx;
}
.iconSerch {
  position: absolute;
  left: 18rpx;
  top: 18rpx;
  font-size: 35rpx;
  color: #999999;
}
/* 条件筛选 */
.conditionSerch {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  margin-top: 12rpx;
  font-size: 22rpx;
  font-weight: 400;
  color: #333333;
}
.conditionSerch view {
  margin-right: 18rpx;
}
.conditionColor {
  color: #1677ff !important;
}
.condiDow {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.condiDow view {
  margin-right: 8rpx;
}
.condiDow .iconfont {
  font-size: 24rpx;
}
/* 列表展示 */
.creamDataList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 27rpx;
}
.creamItem {
  width: 217rpx;
  height: 300rpx;
}
.creamItem image {
  width: 217rpx;
  height: 217rpx;
  background: #d8d8d8;
  border-radius: 11rpx;
}
.creamTitle {
  padding-left: 5rpx;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 25rpx;
  font-weight: 400;
  color: #333333;
}
</style>
